<template>
    <Overlay v-if="showOverlay" >
        <transition name="dialog">
            <div v-if="showDialog" class="dialog-container">
                <div class="dialog-content" v-html="msg">
                </div>
                <div class="dialog-op bd-top-1px">
                    <span class="op-item op-item-no" @click="close()">不同意</span>
                    <span class="op-item op-item-yes" @click="agree()">同意</span>
                </div>
            </div>
        </transition>
    </Overlay>
</template>
<script>

import Overlay from '../overlay/Overlay.vue';

export default {
    name: 'MyDialog',
    components:{
        Overlay
    },
    data() {
        return {
            showDialog:0,
            showOverlay:0,
            msg: '',
            callback:'',
        }
    },
    methods:{
        show() {
            this.showDialog = 1;
            setTimeout(() => {
                this.showOverlay = 1;
            })
        },
        close() {
            this.showDialog = 0;
            //由于嵌套动画，必须先触发里面的动画，再触发外面的动画，否则里面的动画将不执行
            setTimeout(() => {
                this.showOverlay = 0;
            });
        },
        agree() {
            this.close();
            if(this.callback instanceof Function) {
                this.callback();
            }
        }
    }
}
</script>
<style lang="stylus">

.dialog-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size:16px;
    background:#fff;
    width:374px;
    height: 200px;
    border-radius:10px;
}

.dialog-container {
    animation-name:dialog-open;
    animation-duration: .3s;
    animation-timing-function:ease-out;
    animation-fill-mode:forwards;
}

.dialog-leave-active {
    animation-name: dialog-close;
}
@keyframes dialog-open {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes dialog-close {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0);
    }
}


.dialog-content {
    width:100%;
    height: 96px;
    padding:17.25px;
    font-size: 14px;
    box-sizing: border-box;
}

.dialog-op {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height: 57.55px;
    font-size: 18.4px;
    color: #676767;
    display:flex;
    justify-content:space-around;
    align-items:center
}

.op-item-yes {
    color: #ff6700;
}

</style>